<template>
  <view class="container">
    <view class="search-box">
      <view class="search-before-box"
            @tap="showSearchAfter"
            v-show="isShowSearchBefore">
        <view class="search-before-input">
          <view class="search-img">
            <image src="../../static/images/search.png"></image>
          </view>
          <view class="search-txt">搜索大学</view>
        </view>
      </view>
      <view class="search-after-box"
            v-show="isShowSearchAfter">
        <view class="search-after-input">
          <view class="search-img">
            <image src="../../static/images/search.png"></image>
          </view>
          <input :focus="isSearchFocus"
                 class="search-input"
                 placeholder="搜索大学"
                 placeholder-class="input-placeholder"
                 @input="input"
                 v-model="words"
                 @confirm="refresh" />
        </view>
        <view class="search-cancel"
              @tap="showSearchBefore">取消</view>
      </view>
    </view>
    <s-pull-scroll ref="pullScroll"
                   :back-top="true"
                   :pullDown="pullDown"
                   :pullUp="loadData"
                   :fixed="false">

      <view class="list-box">
        <view class="list-item"
              v-for="(item, index) in dataList"
              :key="index"
              @tap="goDetail(item.universityId)">
          <view class="list-item-left">
            <image :src="staticUrl + item.universityBadge"></image>
          </view>
          <view class="list-item-middle">
            <view class="university-name">{{ item.universityName }}</view>
            <view class="university-label-box">
              <view class="university-label"
                    v-for="(itemLabel, labeIndex) in item.universityLabel"
                    :key="labeIndex">{{ itemLabel }}</view>
            </view>
          </view>
        </view>
      </view>

    </s-pull-scroll>
  </view>
</template>

<script>
import { myRequest, http, staticUrl } from '../../utils'
import sPullScroll from '../../components/s-pull-scroll/index.vue'

export default {
  components: {
    sPullScroll
  },
  data () {
    return {
      isShowSearchBefore: true,
      isShowSearchAfter: false,
      loadingText: '加载中...',
      isSearchFocus: false,
      staticUrl: staticUrl,
      params: {
        name: '',
        perPage: 10,
        curPage: 1
      },
      words: '',
      total: 0,
      max: 0,
      dataList: []
    }
  },
  onReady () {
    uni.hideLoading()
  },
  onLoad () {
    this.refresh();
  },
  onPullDownRefresh () {
  },
  onReachBottom () {
  },
  methods: {
    refresh () {
      this.$nextTick(() => {
        this.$refs.pullScroll.refresh();
      });
    },
    pullDown (pullScroll) {
      this.max = 0;
      this.loadData = [];
      this.params.curPage = 1;
      this.getAllUniItem(false);
    },
    loadData (pullScroll) {
      if (this.max >= this.total) {
        this.$refs.pullScroll.finish(this.max >= this.total);
        return;
      }
      this.params.curPage++;
      this.getAllUniItem(true);
    },
    getAllUniItem (loading) {
      this.params.name = this.words
      http('/university/list',
        this.params, {
        hideLoading: false,
        hideMsg: true,
        method: 'POST'
      }).then(
        res => {
          this.total = res.data.data.total;
          const curList = res.data.data.list;
          if (loading) {
            this.max += 10;
            this.dataList = this.dataList.concat(curList);
          } else {
            this.max += 10;
            this.dataList = curList;
          }
          this.$refs.pullScroll.success()

        }).catch(
          err => {
            console.error(err)
          })
    },
    fetchData (data = {}) {
      const that = this

      http('/university/list', data, {
        hideLoading: false,
        hideMsg: true,
        method: 'POST',
      })
        .then((res) => {
          that.dataList = res.data.data.list
        })
        .catch((err) => {
          console.error(err)
        })
    },
    showSearchAfter () {
      this.isShowSearchBefore = false
      this.isShowSearchAfter = true
      this.isSearchFocus = true
    },
    showSearchBefore () {
      this.isShowSearchBefore = true
      this.isShowSearchAfter = false
      this.isSearchFocus = false
    },
    goDetail (id) {
      uni.navigateTo({
        url: '/pages/admission_data/admission_data?id=' + id,
      })
    },
    async input () {
      this.words = s.value;
      this.params.name = this.words;
      this.refresh();
    }
  },
}
</script>

<style>
page {
  background-color: #eeeeee;
}

.container {
  width: 750rpx;
  height: auto;
}

.search-box {
  width: 750rpx;
  height: 88rpx;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.search-before-input {
  width: 702rpx;
  height: 64rpx;
  border: solid 2rpx #d7d6d6;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border-radius: 32rpx;
}

.search-after-box {
  width: 100%;
  height: 88rpx;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.search-after-input {
  width: 600rpx;
  height: 64rpx;
  border: solid 2rpx #d7d6d6;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  border-radius: 32rpx;
  padding-left: 20rpx;
}

.input-placeholder {
  font-size: 24rpx;
  color: #999999;
}

.search-input {
  margin-left: 20rpx;
  height: 64rpx;
}

.search-cancel {
  font-size: 24rpx;
  color: #999999;
  margin-left: 10rpx;
}

.search-txt {
  width: 120rpx;
  font-size: 24rpx;
  color: #999999;
  text-align: center;
}

.search-img image {
  width: 33rpx;
  height: 33rpx;
  margin-top: 8rpx;
}

.list-box {
  width: 750rpx;
  height: auto;
  display: flex;
  flex-direction: column;
}

.list-item {
  background-color: #ffffff;
  width: 750x;
  height: 179rpx;
  display: flex;
  flex-direction: row;
  margin-top: 20rpx;
}

.list-item-left {
  width: 180rpx;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
}

.list-item-middle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  height: 100%;
  padding-left: 32rpx;
}

.university-name {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  font-size: 32rpx;
  color: #333333;
  height: 54rpx;
  margin-bottom: 8rpx;
}

.university-label-box {
  display: flex;
  flex-direction: row;
  margin-bottom: 10rpx;
}

.university-label {
  border: solid 1rpx #f1882b;
  font-size: 20rpx;
  color: #f1882b;
  padding-left: 10rpx;
  padding-right: 10rpx;
  margin-right: 8rpx;
}

.list-item-left image {
  width: 120rpx;
  height: 120rpx;
}
</style>
